<!--
 * @Description: @资料修改通知、问题反馈通知、样品订单通知、需求管理通知、待做补料通知、大货状态通知
 * @FilePath: /glm-mes-pc/src/views/Dialog/NotifyDialog.vue
-->
<template>
	<el-dialog v-model="isVisible" width="870" append-to-body :close-on-click-modal="false" class="NotifyDialog">
		<template #header>
			<span class="title">消息通知</span>
		</template>
		<div class="dialog-conten">
			<!-- 搜索区 -->
			<div class="search-box">
				<el-form :model="form">
					<el-form-item prop="content" style="width: 200px">
						<el-input v-model="form.content" @keyup.enter="getList" clearable placeholder="请输入内容关键字" />
					</el-form-item>
					<el-form-item label="时间" prop="notifyTime" class="notifyTime-box">
						<el-date-picker
							v-model="notifyTime"
							unlink-panels
							value-format="YYYY-MM-DD HH:mm:ss"
							type="daterange"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
						/>
					</el-form-item>
					<el-form-item class="btn-box">
						<el-button @click="getList" type="primary" icon="Search">搜索</el-button>
						<el-button @click="handleRest" icon="Refresh">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 内容区 -->
			<div class="content-box">
				<div class="aside-box">
					<div @click="switchAside(1)" :class="['notify-item', asideActive === 1 ? 'aside-active' : '']">
						<span class="question-icon blue"><svg-icon icon-class="question" color="#fff" /></span>
						<span>问题反馈通知</span>
					</div>
					<div @click="switchAside(2)" :class="['notify-item', asideActive === 2 ? 'aside-active' : '']">
						<span class="question-icon green"><svg-icon icon-class="question" color="#fff" /></span>
						<span>资料修改通知</span>
					</div>
					<div @click="switchAside(3)" :class="['notify-item', asideActive === 3 ? 'aside-active' : '']">
						<span class="question-icon pink"><svg-icon icon-class="question" color="#fff" /></span>
						<span>样品订单通知</span>
					</div>
					<div @click="switchAside(4)" :class="['notify-item', asideActive === 4 ? 'aside-active' : '']">
						<span class="question-icon yellow"><svg-icon icon-class="question" color="#fff" /></span>
						<span>需求管理通知</span>
					</div>
					<div @click="switchAside(5)" :class="['notify-item', asideActive === 5 ? 'aside-active' : '']">
						<span class="question-icon grey"><svg-icon icon-class="question" color="#fff" /></span>
						<span>待做补料通知</span>
					</div>
					<div @click="switchAside(6)" :class="['notify-item', asideActive === 6 ? 'aside-active' : '']">
						<span class="question-icon purple"><svg-icon icon-class="question" color="#fff" /></span>
						<span>大货状态通知</span>
					</div>
				</div>
				<div class="main-box">
					<div class="tabs">
						<div @click="switchTabs(0)" :class="['tabs-item', tabsActive === 0 ? 'tbas-active' : '']">未读</div>
						<div @click="switchTabs('')" :class="['tabs-item', tabsActive === '' ? 'tbas-active' : '']">全部</div>
					</div>
					<div class="list-box">
						<!-- 问题反馈类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 1" class="problem-box">
							<div v-for="item in dataList" :key="item.messageId" class="problem-item">
								<div class="title">
									<span v-if="item.feedbackType === 1">采购问题反馈</span>
									<span v-else-if="item.feedbackType === 2 && item.problemType !== 4">款式问题反馈</span>
									<span v-else-if="item.feedbackType === 2 && item.problemType === 4">幅宽缩率通知</span>
									<span v-else-if="item.feedbackType === 3">对账问题反馈</span>
									<span v-else-if="item.feedbackType === 4">物料接收问题反馈</span>
									<span v-else-if="item.feedbackType === 5">系统问题反馈</span>
									<span v-else>问题反馈</span>
								</div>
								<div class="row">
									<span class="content">{{ delPTag(item.content) }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleLookProblem(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleLookProblem(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="row">
									<div class="key-value">
										<span class="key">发送人</span>
										<span class="value">{{ item.createName }}</span>
									</div>
									<div class="key-value">
										<span class="key">发送时间</span>
										<span class="value">{{ item.createTime }}</span>
									</div>
								</div>
							</div>
						</div>

						<!-- 资料修改类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 2" class="info-box">
							<div v-for="item in dataList" :key="item.messageId" class="info-item">
								<div class="title">资料修改通知</div>
								<div class="row">
									<span class="content">{{ item.content }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleLookInfo(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleLookInfo(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="time-container">
									<span class="value">{{ item.createTime }}</span>
								</div>
							</div>
						</div>

						<!-- 样品订单类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 3" class="sampleOrder-box">
							<div v-for="item in dataList" :key="item.messageId" class="sampleOrder-item">
								<div class="title">样品订单通知</div>
								<div class="row">
									<span class="content">{{ item.content }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleLookOrder(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleLookOrder(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="row">
									<div class="key-value">
										<span class="key">发送人</span>
										<span class="value">{{ item.createName }}</span>
									</div>
									<div class="key-value">
										<span class="key">发送时间</span>
										<span class="value">{{ item.createTime }}</span>
									</div>
								</div>
							</div>
						</div>

						<!-- 需求管理类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 4" class="sampleOrder-box">
							<div v-for="item in dataList" :key="item.messageId" class="sampleOrder-item">
								<div class="title">需求管理通知</div>
								<div class="row">
									<span class="content">{{ item.content }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleLookDemand(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleLookDemand(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="row">
									<div class="key-value">
										<span class="key">发送人</span>
										<span class="value">{{ item.createName }}</span>
									</div>
									<div class="key-value">
										<span class="key">发送时间</span>
										<span class="value">{{ item.createTime }}</span>
									</div>
								</div>
							</div>
						</div>

						<!-- 待做补料类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 5" class="info-box">
							<div v-for="item in dataList" :key="item.messageId" class="info-item">
								<div class="title">待做补料通知</div>
								<div class="row">
									<span class="content">{{ item.content }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleReplenInfo(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleReplenInfo(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="time-container">
									<span class="value">{{ item.createTime }}</span>
								</div>
							</div>
						</div>

						<!-- 大货状态类型 -->
						<div v-if="dataList.length > 0 && dataList[0].messageType === 6" class="info-box">
							<div v-for="item in dataList" :key="item.messageId" class="info-item">
								<div class="title">大货状态通知</div>
								<div class="row">
									<span class="content">{{ item.content }}</span>
									<span v-if="item.disposeStatus === 0" @click="handleBulkInfo(item)" class="red-color cursor">未读</span>
									<!-- 已读icon -->
									<svg-icon v-if="item.disposeStatus === 1" @click="handleBulkInfo(item)" icon-class="yidu" class="ycl-icon" />
								</div>
								<div class="time-container">
									<span class="value">{{ item.createTime }}</span>
								</div>
							</div>
						</div>

						<el-empty v-if="dataList && dataList.length == 0" description="暂无数据" />
					</div>

					<!-- 分页 -->
					<div class="paginationBox">
						<el-pagination
							size="small"
							background
							layout="total, sizes, prev, pager, next"
							v-show="total > 0"
							:total="total"
							:page-sizes="[10, 20, 30, 50]"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
						/>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>

<script setup>
import { delPTag } from '@/utils/ruoyi.js'
import { getNotifyListAPI, updateInfoStatusAPI, getCheckStatusAPI } from '@/api/problem.js'
import { checkRole } from '@/utils/permission.js'
import useTagsViewStore from '@/store/modules/tagsView'
const { proxy } = getCurrentInstance()
const router = useRouter()
const emit = defineEmits(['update:isShow'])
const props = defineProps({
	isShow: {
		type: Boolean,
		required: true
	}
})
const isVisible = computed({
	get() {
		return props.isShow
	},
	set() {
		emit('update:isShow', false)
	}
})

/* 表单字段 */
const form = ref({
	number: proxy.getAccount(), // 登录人账号
	messageType: 1, // 消息类型: 1-问题反馈通知, 2-资料修改通知
	disposeStatus: 0, // 处理状态: 0-待处理, 1-已处理, 不填''全部
	content: '', // 关键字
	startDate: '', // 开始时间
	endDate: '' // 结束时间
})
const notifyTime = ref([]) // 时间
watch(notifyTime, (newVal) => {
	if (newVal) {
		form.value.startDate = newVal[0]
		form.value.endDate = newVal[1]
	} else {
		form.value.startDate = ''
		form.value.endDate = ''
	}
})

/* 重置 */
const handleRest = () => {
	notifyTime.value = []
	form.value.content = ''
	form.value.startDate = ''
	form.value.endDate = ''
	form.value.disposeStatus = 0
	pageNum.value = 1
	pageSize.value = 10
	total.value = 0
	tabsActive.value = 0
	getList()
}

/* 切换侧边栏 */
const asideActive = ref(1)
const switchAside = (status) => {
	asideActive.value = status
	form.value.messageType = status
	pageNum.value = 1
	pageSize.value = 10
	total.value = 0
	getList()
}

/* 切换tabs */
const tabsActive = ref(0)
const switchTabs = (status) => {
	tabsActive.value = status
	form.value.disposeStatus = status
	pageNum.value = 1
	pageSize.value = 10
	total.value = 0
	getList()
}

/* 查看问题反馈详情 */
const handleLookProblem = (item) => {
	// 更改问题反馈消息状态:待处理->已处理
	isVisible.value = false
	if (item.problemType === 4) {
		//单独处理幅宽缩率跳转
		router.push({
			params: { id: item.problemId },
			query: {
				problemType: item.problemType,
				msgId: item.messageId
			},
			name: 'handleWidthOfCloth'
		})
	} else {
		router.push({ params: { id: item.problemId }, query: { msgId: item.messageId }, name: 'problemDetail' })
	}
	if (item.disposeStatus === 0) {
		updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
		// 小红点是否再显示
		setTimeout(() => {
			proxy.EventBus.emit('getUnreadCount_event')
		}, 1000)
	}
}

/* 查看资料修改 */
const handleLookInfo = async (item) => {
	// 更改资料修改消息状态:待处理->已处理
	if (item.disposeStatus === 0) {
		updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
		// 小红点是否再显示
		setTimeout(() => {
			proxy.EventBus.emit('getUnreadCount_event')
		}, 1000)
	}

	/*
		1.工艺员(gyy)和技术部负责人(jsbfzr)调用接口查询数据状态，跳转到资料审核，触发搜索条件,销售订单号,款号，id，状态; orderAudit
		2.供应商角色（gys、2gyy、gysjhy）和跟单员角色（gdy）携带销售订单号和款号参数，跳转到标准委外详情页面
		*/
	if (checkRole(['gys', 'wxgys', 'mlgys', 'flgys']) || checkRole(['2gyy', 'mlgysyg', 'flgysyg']) || checkRole(['gysjhy']) || checkRole(['gdy'])) {
		router.push({
			name: 'fileChangeDetail',
			query: {
				ddh: item.salesOrderNumber,
				kh: item.styleNumber
			}
		})
	} else if (checkRole(['jsbfzr']) || checkRole(['gyy'])) {
		let reviewStatus
		let res = await getCheckStatusAPI({
			dataId: item.dataId
		})
		if (res.data) {
			// 1待审核2通过3驳回
			reviewStatus = res.data.reviewStatus
		}
		router.push({ name: 'Order-audit', query: { xsddh: item.salesOrderNumber, kh: item.styleNumber, status: reviewStatus, dataId: item.dataId } })
	}

	isVisible.value = false
}

/* 查看样品订单 */
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const handleLookOrder = (item) => {
	isVisible.value = false
	visitedViews.value.find((items) => {
		if (items.name == 'SampleSalesOrderNew') {
			proxy.$tab.closePage(reactive(items)).then(({ visitedViews }) => {
				const latestView = visitedViews.slice(-1)[0]
				router.push(latestView.fullPath)
			})
		}
	})
	const rejectTypeMap = {
		// 驳回到发起人
		0: { activeCom: '0' },
		1: { activeCom: '1' },
		2: { activeCom: '2' },
		3: { activeCom: '3' },
		4: { activeCom: '4' },
		5: { activeCom: '5' },
		6: { activeCom: '6' },
		7: { activeCom: '7' },
		8: { activeCom: '8' },
		9: { activeCom: '9' },
		10: { activeCom: '10' },
		11: { activeCom: '11' },
		12: { activeCom: '12' },
		// 2024-10-18:增加待质检包装扫码消息提醒，跳转到样品订单看板
		13: { activeCom: '20' }
	}
	const params = rejectTypeMap[item.rejectType]
	let query = {}
	if (params) {
		query = {
			activeCom: params.activeCom,
			salesOrderNumber: item.salesOrderNumber,
			styleNumber: item.styleNumber,
			fromNotice: true
		}
	}
	setTimeout(() => {
		router.push({ query, name: 'SampleSalesOrderNew' })
		if (item.disposeStatus === 0) {
			updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
			// 小红点是否再显示
			setTimeout(() => {
				proxy.EventBus.emit('getUnreadCount_event')
			}, 1000)
		}
	}, 0)
}

/* 查看需求排产列表 */
const handleLookDemand = (item) => {
	isVisible.value = false
	router.push({ name: 'DemandScheduling', query: { status: 2 } })
	if (item.disposeStatus === 0) {
		updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
		// 小红点是否再显示
		setTimeout(() => {
			proxy.EventBus.emit('getUnreadCount_event')
		}, 1000)
	}
}

/* 查看待做补料 */
const handleReplenInfo = async (item) => {
	if (item.disposeStatus === 0) {
		updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
		// 小红点是否再显示
		setTimeout(() => {
			proxy.EventBus.emit('getUnreadCount_event')
		}, 1000)
	}
	router.push({ name: 'BulkOrder', query: { activeCom: 2, xsddh: item.salesOrderNumber, kh: item.styleNumber } })
	isVisible.value = false
}

/* 查看大货状态 */
const handleBulkInfo = async (item) => {
	if (item.disposeStatus === 0) {
		updateInfoStatusAPI({ messageId: item.messageId, disposeStatus: 0 })
		// 小红点是否再显示
		setTimeout(() => {
			proxy.EventBus.emit('getUnreadCount_event')
		}, 1000)
	}
	router.push({ name: 'Style', query: { xsddh: item.salesOrderNumber, kh: item.styleNumber, type: item.stopType == 0 ? 'pause' : 'restore' } })
	isVisible.value = false
}

// 分页
const pageNum = ref(1)
const pageSize = ref(10)
const handleSizeChange = (value) => {
	pageSize.value = value
	pageNum.value = 1
	getList()
}
const handleCurrentChange = (value) => {
	pageNum.value = value
	getList()
}

/* 获取消息中心数据 */
const dataList = ref([]) // 消息列表
const total = ref(0)
async function getList() {
	const { data: res } = await getNotifyListAPI({ ...form.value, pageNum: pageNum.value, pageSize: pageSize.value })
	dataList.value = res.records
	total.value = res.total
}
// getList()
defineExpose({
	getList
})
</script>

<style lang="scss">
/* 消息通知弹框 */
.NotifyDialog {
	font-size: 14px;
	// 弹框头部
	.el-dialog__header {
		padding: 0 16px;
		margin: 0;
		height: 50px;
		background: linear-gradient(90deg, #265bae, #4a7ece);
		color: #ffffff;
		display: flex;
		align-items: center;
		.title::before {
			content: '';
			display: inline-block;
			width: 6px;
			height: 6px;
			border-radius: 50%;
			margin-right: 10px;
			background-color: #fff;
		}
		// 关闭按钮
		.el-dialog__headerbtn {
			top: 10px;
			right: 10px;
			font-size: 20px;
			width: 30px;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			.el-dialog__close {
				color: #fff;
				font-size: 20px;
				&:hover {
					color: #be1c1c;
					transform: scale(1.2);
				}
			}
		}
	}
	// 弹框体
	.el-dialog__body {
		background-color: #eaf1fa;
		padding: 10px;
	}
	// 搜索区
	.el-dialog__body .search-box {
		width: 853px;
		height: 50px;
		display: flex;
		align-items: center;
		background-color: #f4f8fe;
		padding: 6px;
		box-shadow: 0px 2px 0px 0px rgba(6, 40, 119, 0.05);
		.el-form {
			width: 100%;
			display: flex;
			align-items: center;
			.el-form-item {
				margin-bottom: 0;
			}
			.notifyTime-box {
				width: 260px;
				.el-form-item__label {
					font-weight: 400;
					color: #7d8592;
					margin-left: 10px;
				}
			}
			.btn-box {
				margin-left: auto;
			}
		}
	}

	// 内容区
	.el-dialog__body .content-box {
		display: flex;
		margin-top: 10px;
	}
	// 左侧-aside
	.content-box .aside-box {
		width: 214px;
		height: 600px;
		background: #f4f8fe;
		.notify-item {
			height: 60px;
			font-size: 14px;
			font-weight: 400;
			color: #061326;
			display: flex;
			align-items: center;
			padding-left: 20px;
			cursor: pointer;
			.question-icon {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20px;
			}
			.blue {
				background-color: #265bae;
			}
			.green {
				background-color: #008572;
			}
			.pink {
				background-color: #fd6072;
			}
			.yellow {
				background-color: #f47800;
			}
			.grey {
				background-color: #909399;
			}
			.purple {
				background-color: #626aef;
			}
			&.aside-active,
			&:hover {
				background-color: #dfe8f6;
			}
		}
	}
	// 右侧-main
	.content-box .main-box {
		flex: 1;
		margin-left: 10px;
		background-color: #eaf1fa;
		// 待处理-全部
		.tabs {
			height: 40px;
			display: flex;
			align-items: center;
			background-color: #f4f8fe;
			.tabs-item {
				width: 100px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				&.tbas-active,
				&:hover {
					background-color: #dfe8f6;
					color: #265bae;
					border-bottom: 1px solid #1cbeb1;
				}
			}
		}
		// 列表区
		.list-box {
			margin-top: 10px;
			max-height: 470px;
			overflow-y: auto;
			// 问题反馈类型&资料修改类型
			.problem-box,
			.info-box,
			.sampleOrder-box {
				.problem-item,
				.info-item,
				.sampleOrder-item {
					padding: 10px;
					background-color: #f4f8fe;
					margin-bottom: 10px;
					&:last-child {
						margin-bottom: 0;
					}
					.title {
						color: #061326;
						font-size: 14px;
					}
					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-left: 30px;
						margin-top: 15px;
						.ycl-icon {
							color: #be1c1c;
							transform: scale(3);
							margin-right: 20px;
							cursor: pointer;
							&:hover {
								color: #ff5f4c;
							}
						}
						.key::after {
							content: ':';
							font-size: 16px;
							margin: 0 4px;
						}
						// 通知内容溢出隐藏
						.content {
							max-width: 500px;
							white-space: nowrap;
							white-space: pre-line;

							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3; /* 这里是超出几行省略 */
						}
					}
				}
			}
			.info-box {
				.info-item {
					.time-container {
						text-align: end;
						margin-left: 30px;
						margin-top: 15px;
					}
				}
			}
		}
		.pagination-container {
			background: #f4f8fe;
		}
	}
}
.paginationBox {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	height: 50px;
	background: #f4f8fe;
}
</style>
